<%-- 
    Document   : form
    Created on : Feb 8, 2014, 7:00:32 PM
    Author     : Marek
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <!-- TODO: Can i easy read browser, and system properties directly from User request?
    <!-- TODO: Design div naming policy-->
    <!-- TODO: Design div id policy-->
    <!-- TODO: Design standard css structure policy-->
    <!-- TODO: Create for, for two pages, programatically set-->
    <!-- TODO: Create for, for query, programatically set-->
    <!-- TODO: Design position in form container-->
    <!-- TODO: Design template mechanism, integrated with the database, or xml config files-->
    <!-- TODO: Values are automaticly loaded from the request. Server is always giving filled before requests
    <!-- TODO: Create messages components, for each of question, and global message
    <!-- TODO: Design javascript:
            - show page N, where N is value of request parameter 
            - show form whole form, and special button when noscript is set
            - show send one answer, when user stops the typing
            - show message, when some errors occiured, just after the ansfer was sended
            - when user refresh the form, show the form with last made by user changes
            - send the form when user refreshes the page
            - program button actins
            - do the validation check every time, the user changed someting
    -->
    <!--TODO: Do the validation check every time, the user sends the form.
    <!--TODO: Create the support for the old browsers
    <!--TODO: Add some user definied script, animations, and other :-)
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Example form template</title>
    </head>
    <body class="body">
        <form class="form" name="">
            <div class="form-container">
                <!--foreach page in the database new page tag is created-->
                <div class="page" id="1">
                    <div>Here goes the subject page 1, and the logo <img alt="logo"/></div>
                    <div>Here goes some description.</div>
                    <div>Question one name</div>
                    <!-- do for here foreach question-->
                    <!--foreach question in database new question is created-->
                    <div class="radio-container">
                        <div class="radio-description">Question one field</div>
                        <div class="radio-elements">
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 1</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 2</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 3</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 4</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 5</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 6</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 7</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 8</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 9</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 10</div>
                        </div>
                    </div>
                    <!-- end for here-->
                </div>
                <!--foreach page in the database new page tag is created-->
                <div class="page" id="2">
                    <div>Here goes the subject page 1, and the logo <img alt="logo"/></div>
                    <div>Here goes some description.</div>
                    <div>Question one name</div>
                    <!-- do for here foreach question-->
                    <div class="radio-container">
                        <div class="radio-description">Question one field</div>
                        <div class="radio-elements">
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 1</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 2</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 3</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 4</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 5</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 6</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 7</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 8</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 9</div>
                            <div class="radio-element-field"><input type="radio" name="id" value="answerValue"/></div><div class="radio-element-description">Value 10</div>
                        </div>
                    </div>
                    <!-- end for here-->
                </div>
                <!-- buttons section goes here-->
                <div class="form-button-container">
                    <!--foreach button in database, butons are created-->
                    <div class="form-button-container-cancel">
                        <input type="button" value="Następna strona"/>
                    </div>
                    <div class="form-button-container-prev">
                        <input type="button" value="Poprzednia strona"/>
                    </div>
                    <div class="form-button-container-next">
                        <input type="button" value="Anuluj formularz"/>
                    </div>
                    <div class="form-button-container-cancel">
                        <input type="button" value="Wyślij formularz"/>
                    </div>
                    <!--TODO: Use some noscript tags for not supported browsers, or check if user has js set to off directly from request parameters -->
                    <noscript>
                    <div class="form-button-container-cancel"><input type="reset" value="Wyczyść"/></div>
                    <div class="form-button-container-cancel"><input type="submit" value="Wyślij"/></div>
                    </noscript>
                </div>
            </div>
        </form>


    </body>
</html>
